<template>
	<view class="box" >
		<uni-nav-bar  left-text="首页" backgroundColor='#c7d5ff'  statusBar :border='false'></uni-nav-bar>
		<view class="lunbt">
			<swiper class="swiper" 
			indicator-active-color='#fff' 
			circular 
			:indicator-dots="true" 
			:autoplay="true" :interval="3000"
			:duration="500">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="item.img" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="top">
			<view class="top_box2">
				<uni-easyinput class="inputs" confirm-type="search"  prefixIcon="search" v-model="params.itemName" placeholder="搜索项目名称" @clear="iconClick"
					input-class="custom-easyinput" disableColor='#F3F3F5' @change='inputchange'>
				</uni-easyinput>
				<view class="xuanzeqi">
					<view class="" style="margin-right: 10rpx;">
						<picker @cancel='cancel' @change="areaChange" :value="colorIndex" :range="areasList" range-key="areaName">
							<view class="uni-input">{{ colorIndex === 0 ? '地区' : areasList[colorIndex].areaName }}</view>
						</picker>
					</view>	
					<uni-icons type="down" size="15"></uni-icons>
				</view>
			</view>
			<view class="top_box3">
				<view class="tabxuanzeqi" >
					<view class="" v-for="(item,index) in tablist" :key="index">
						<view class="items"  @click="checkIndex(item.id)">
						  <view class="" style="width: 100rpx;margin: 0 auto;" :class="navIndex == item.id ? 'activite':''">
						  	{{item.tname}}
						  </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="neir_box">
			<view class="content">
				<view class="neir_hezi" v-for="(item,index) in list" :key="index" @click="gocontent(item,index)">
					<view class="neir_top">
						<view class="shijian">
							<span>{{item.createTime}}</span>
						</view>
						<view v-if="item.itemStatus == 1" class="biaoqian wancheng">
							<span>未审核</span>
						</view>
						<view v-if="item.itemStatus == 9" class="biaoqian wancheng">
							<span>已完成</span>
						</view>
						<view v-if="item.itemStatus == 2" class="biaoqian ">
							<span>进行中</span>
						</view>
					</view>
					<view class="neir_top2">
						<view class="left">
							<view class="left_box1">
								<view class="left_box1_left">
									<span>{{index+1}}</span>
								</view>
								<view class="name">
									{{item.itemName}}
								</view>
							</view>
							<view class="left_box2">
								<span>ID:{{item.id}}</span>
								<span>地区:{{item.areaName}}</span>
								<span>项目金额: <p>{{item.itemAmount}}</p> </span>
							</view>
						</view>
						
					</view>
					<view class="shijians" v-if="item.itemStatus == 9">
						完成时间：{{item.itemStatusTime}}
					</view>
					
				</view>
				<view class="kong" v-if="list.length == ''">
					<image class="img" src="../../static/kong.png" mode=""></image>
					<view class="text">
						暂无数据
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<uv-tabbar :value="value"  class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		getBanner,getList,getAreas
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				statusBarHeight:uni.getStorageSync('heights'),
				bannerList:[],
				params:{
					itemName:'',
					pageNum:1,
					pageSize:5
				},
				tablist:[
					{
						id:1,
						tname:'全部'
					},
					{
						id:2,
						tname:'进行中'
					},
					{
						id:9,
						tname:'已完成'
					}
				],
				navIndex: 1,
				value:0,
				
				colorIndex:0,
				// 在picker列表所选中项颜色id  
				color_id: '',
				areasList: [],
				list:[]
			}
		},
		onShareAppMessage(res) {
			return {
				title: '伟途科技欢迎你！',
				path: `/pages/indexs/home_Partner`,
			}
		},
		onShareTimeline(res) {
			return {
				title: '伟途科技欢迎你！',
				path: `/pages/indexs/home_Partner`,
			}
		},
		onLoad() {
			getBanner().then(res=>{
				if(res.code == 200){
					this.bannerList = res.rows
				}
			})
			getAreas().then(res=>{
				if(res.code == 200){
					this.areasList = res.data
				}
			})
			this.getitemList()
		},
		methods: {
			onReachBottom(){
				this.params.pageNum ++ 
				this.getitemList()
			},
			iconClick(){
				this.params.itemName = ''
				this.resout()
				this.getitemList()
			},
			inputchange(e){
				this.resout()
				this.getitemList()
			},
			getitemList(){
				getList(this.params).then(res=>{
					if(res.code == 200){
						// this.list = res.rows
						this.list.push(...res.rows)
					}
				})
			},
			checkIndex(i) {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				this.resout()
				this.navIndex = i
				if(i == 1){
					this.params.itemStatus = ''
				}else{
					this.params.itemStatus = i
				}
				this.getitemList()
			},
			
			gocontent(item,index){
				console.log(item.id,index);
				uni.navigateTo({
					url:`/pages/indexs/content?id=${item.id}&&index=${index}`
				})
			},
			areaChange(e){
				this.colorIndex =e.detail.value
				this.params.areaId = this.areasList[this.colorIndex].id
				this.resout()
				this.getitemList()
			},
			cancel(){
				this.params.areaId  = ''
				this.colorIndex = 0
				this.resout()
				this.getitemList()
			},
			resout(){
				this.list = []
				this.params.pageNum = 1
				this.params.pageSize = 5
			},
		},

	}
</script>

<style lang='scss' scoped>
	.kong{
		margin-top: 80rpx;
		.img{
			width: 300rpx;
			height: 300rpx;
		}
		.text{
			color: #CCCCCC;
			text-align: center;
		}
	}
	.tab {
		.icon{
			width: 43rpx;
			height: 43rpx;
		}
		image {
			width: 43rpx;
			height: 43rpx;
		}
	}
	.lunbt {
		background-image: linear-gradient(0deg, #ffffff 0%, #f6f6fa 1%, #c7d5ff 100%);
		padding-top: 20rpx;
		text-align: center;
		padding-bottom: 20rpx;
	}

	.swiper {
		height: 300rpx;
		image {
			width: 700rpx;
			height: 300rpx;
			border-radius: 20rpx;
		}
	}
				.shijians {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #A09F9F;
						margin-left: 20rpx;
				}
	.neir_box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.neir_hezi {
			width: 700rpx;
			padding-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 25rpx;
			.neir_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 40rpx;
				padding: 20rpx;
				border-bottom: 2rpx #F1F1F1 solid;
				.shijian {
					span {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #A09F9F;
						line-height: 48rpx;
					}
				}

				.biaoqian {
					width: 84rpx;
					height: 34rpx;
					background: #E1FCF9;
					border-radius: 4rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					span {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #00C8AE;
						line-height: 50rpx;
					}
				}

				.wancheng {
					background: #F2F2F2 !important;
					span {
						color: #989898 !important;
					}

				}
			}

			.neir_top2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 50rpx;
				margin-top: 16rpx;
				.left {
					display: flex;
					flex-direction: column;
					.left_box1 {
						display: flex;
						align-items: center;
						.left_box1_left {
							span {
								margin: 0rpx 25rpx;
								display: inline-block;
								display: flex;
								align-items: center;
								justify-content: center;
								width: 43rpx;
								height: 28rpx;
								background: #065CF7;
								border-radius: 6rpx;
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 22rpx;
								color: #FFFFFF;
							}


						}

						.name {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #171717;
							line-height: 48rpx;

						}
					}

					.left_box3 {
						span {
							margin-left: 25rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #A09F9F;
							display: flex;
						}
					}

					.left_box2 {

						display: flex;

						span {
							margin-left: 25rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #A09F9F;
							display: flex;
						}

						p {
							color: #ff9534;
							margin-left: 10rpx;
							font-weight: 600;
							font-size: 26rpx;
						}
					}
				}

				.right {
					span {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 142rpx;
						height: 55rpx;
						background: #FFFFFF;
						border-radius: 27rpx;
						border: 1px solid #065CF7;
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 24rpx;
						color: #065CF7;
						margin-right: 25rpx;
					}
				}
			}

		}
	}

	.tabxuanzeqi {
		display: flex;
		justify-content: space-around;
		margin-top: 25rpx;
		border-top: 1px solid #F3F3F5;
		height: 100rpx;
		align-items: center;
		.items {
			width: 200rpx;
			height: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #8A8A8A;
			line-height: 48rpx;
			text-align: center;
		}
	}
	::v-deep .uni-easyinput__content {
		border-radius: 50rpx;
		background-color: #f3f3f5 !important;
	}


	.top {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding-top: 50rpx;
		background-color: #ffffff;

		.top_box1 {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
		}

		.top_box2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0rpx 25rpx;
            .inputs{
				width: 560rpx;
			}
			.xuanzeqi {
				display: flex;
				align-items: center;
				margin: 0rpx 10rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 48rpx;
			}
		}
	}



	.head-nav {
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #CCCCCC;
	}

	.activite {
		border-bottom: 4rpx #065CF7 solid;
		font-family: PingFang SC !important;
		font-weight: bold !important;
		font-size: 30rpx !important;
		color: #065CF7 !important;
		padding-bottom: 6rpx;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}

	.content {
		/* background: #008000; */
		height: 100%;
	}
</style>